<template>
  <div class="container">
    <el-row>
      <el-col :span="4" v-for="(o, index) in api.getMenu().length" :key="o" :offset="index > 0 ? 0: 0">
        <el-card :body-style="{ padding: '0px'}">
          <img src="../../../assets/dumpling.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{api.getMenu()[index].name}}</span>
            <span style="float:right;color:#afafaf">￥{{api.getMenu()[index].price}}</span>
            <div class="bottom clearfix">
              <time class="time">{{ api.getMenu()[index].list[0] }} {{ api.getMenu()[index].list[1] }} {{
                api.getMenu()[index].list[2] }}...
              </time>
              <el-button type="text" class="button" @click="order(index)">下单</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      :title="'确认购买  '+tempinfo.title"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <div class="block">
        <span class="demonstration">购买数量</span>
        <span style="float: right">￥{{tempinfo.price*value}}</span>
        <el-slider
          v-model="value"
          :step="1"
          :max="10"
          show-stops>
        </el-slider>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "GDFunctionUserMenu",
    data() {
      return {
        dialogVisible: false,
        currentDate: new Date().toLocaleString(),
        value: 1,
        tempinfo: {title: '', price: 0, id: 0}
      };
    },
    methods: {
      order(index) {
        this.value = 1;
        this.tempinfo = {
          title: this.api.getMenu()[index].name,
          price: this.api.getMenu()[index].price,
          id: index
        };
        this.dialogVisible = true;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      confirm() {
        this.$message('下单成功');
        this.api.addOrderList({
          user: this.$store.state.user,
          index: this.tempinfo.id,
          number: this.value,
          date: new Date()
        });
        this.dialogVisible = false;
      }
    }
  }
</script>

<style scoped>
  .container {
    /*width: 100%;*/
    padding: 5px;
  }

  .el-card {
    width: 200px;
    margin: 2px;
    margin-bottom: 10px;
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 350px;
    transform: translateX(-30%);
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
